<template>
    <view class="bg-[#F6F7F9] min-h-screen relative">
        <up-navbar title="购物车" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="flex items-center justify-between px-[30rpx] py-[24rpx] bg-[#fff] ">
            <view class="flex items-center">
                <view class="flex items-center border-[1rpx] rounded-[40rpx] py-[8rpx] px-[24rpx] border-[#46A7FD] bg-[#EDF7FF]">
                    <view class="text-[26rpx] text-[#222] font-normal mr-[12rpx]">全部({{ PickList.length }})</view> 
                    <image src="../static/bottom.png" mode="scaleToFill" class="w-[16rpx] h-[16rpx] block"/>
                </view>
            </view>
            <view @click="redact" v-if="!show">管理</view>
            <view @click="redact" v-else>退出管理</view>
        </view>
        
        <view class="py-[30rpx]">
            <view class="bg-[#fff] mb-[24rpx]">
                <view @click="checkPick" class="px-[30rpx] pt-[30rpx] pb-[15rpx] flex items-center">
                    <view class="mr-[30rpx]">
                        <image v-if="PickShow" src="../static/gou-fill.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                        <image v-else src="../static/gou.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                    </view>
                    <image src="../static/cart.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                    <view class="mx-[12rpx] text-[26rpx] text-[#333] font-bold">全选</view>
                    <!-- <image src="../static/right.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/> -->
                </view>
                <shoppingItem @num="OnNum" @check="onCheck" v-for="(item,index) in PickList" :key="index" :item="item"></shoppingItem>
            </view>
            <!-- <view class="bg-[#fff]">
                <view class="px-[30rpx] pt-[30rpx] pb-[15rpx] flex items-center">
                    <view class="mr-[30rpx]" @click="checkPost">
                        <image v-if="postShow" src="../static/gou-fill.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                        <image v-else src="../static/gou.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                    </view>
                    <image src="../static/cart.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                    <view class="mx-[12rpx] text-[26rpx] text-[#333] font-bold">邮递商品</view>
                    <image src="../static/right.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                </view>
                <shoppingItem @num="OnNum" @check="onCheck" v-for="(item,index) in postList.carList" :key="index" :item="item"></shoppingItem>
            </view> -->
        </view>
        <view class="h-[120rpx]"></view>
        <view v-if="!show" class="flex bg-[#fff] justify-between fixed w-[100%] bottom-0 left-0 pb-[30rpx]">
            <view class="flex items-center ml-[36rpx]">
                <view class="text-[28rpx] text-[#333] font-normal">合计</view>
                <priceNumber :price="priceAll"></priceNumber>
            </view>
            <view @click="ImmediatePayment" class="text-[#fff] text-[32rpx] font-bold px-[70rpx] py-[26rpx] bg-[#FF4D1B] rounded-[16rpx]">立即支付</view>
        </view>
        <view v-else class="flex bg-[#fff] justify-center fixed w-[100%] bottom-0 left-0 pb-[30rpx] pt-[30rpx] text-center z-10">
            <view @click="deleteProduct" class="bg-[#FF4D1B] text-[32rpx] text-[#fff] font-bold w-[690rpx] rounded-[16rpx] height-[88rpx] leading-[88rpx]">删除</view>
        </view>
    </view>
</template>

<script setup>
import { onLoad , onShow } from '@dcloudio/uni-app'
import priceNumber from '@/components/priceNumber.vue'
import shoppingItem from '@/components/shoppingItem.vue';
import { computed, ref } from 'vue';
import { CarListDel, GetCarList, UpdataCar, UpdataCarList } from '../../API/car';
import { GetOrderCat } from '../../API/order';
const { goback , gohome } = useTab()
const { total , intersection , deleteProduct , redact , getCart , ImmediatePayment , checkPost , checkPick , priceAll , show , PickList , postList ,  PickShow , postShow  } = useList()
const onCheck = async (e) => {
    let res = await UpdataCar(e)
    await getCart(true)
    await getCart(false)
}
const OnNum = async (e) => {
    let res = await UpdataCar(e)    
    await getCart(true)
    await getCart(false)
}
function useTab () {
    const goback = ()=>{
        uni.navigateBack()
    }
    const gohome = ()=>{
        uni.switchTab({ url: '/pages/index/index' })
    }
    return { goback , gohome }
}
function useList () {
    const PickShow = ref(false)
    const postShow = ref(false)
    const show = ref(false)
    const total = ref(0)
    const intersection = ref([])
    const PickList = ref({})
    const postList = ref({})
    const deleteProduct = async ()=>{
        let list = []
        list = [...PickList.value.filter(item=>item.isCheck)]
        list = list.map(item=>item.carId)
        let { data } = await CarListDel(list)
        await getCart(true)
        await getCart(false)
        uni.showToast({
            title: '删除成功!',
            icon: 'none',
            mask: true,
            success:()=>{
                redact()
            }
        })
    }
    const redact = ()=>{
        show.value = !show.value
    }
    const getCart = async(value)=>{
        let { data } = await GetCarList({deliveryType:value})
        PickList.value = data.carList
        intersection.value = data.intersection
        total.value = data.total
        if(PickList.value.length){
           PickShow.value = PickList.value?.every(item=>item.isCheck)
        }else{
            PickShow.value = false
        }
        // if(value){
        //     PickList.value = data
        //     if(PickList.value?.carList.length){
        //        PickShow.value = PickList.value?.carList.every(item=>item.isCheck)
        //     }else{
        //         PickShow.value = false
        //     }
        //     console.log( 'PickShow' , PickShow.value );
        // }else{
        //     postList.value = data
        //     if(postList.value?.carList.length){
        //         postShow.value = postList.value?.carList.every(item=>item.isCheck)
        //     }else{
        //         postShow.value = false
        //     }
        //     console.log( 'postShow' , postShow.value );
        // }
    }
    const priceAll = computed(()=>{
        let price = 0
        if(PickList.value){
            let list = PickList.value.filter(item=>item.isCheck)
            if(list.length){
                list.reduce((pro,item)=>{
                    price += item.price * item.num
                },0)
            }
        }
        // if(postList.value){
        //     let arr = postList.value.filter(item=>item.isCheck)
        //     if(arr.length){
        //         arr.reduce((pro,item)=>{
        //             price += item.price * item.num
        //         },0)
        //     }
        // }
        return price
    })
    const ImmediatePayment = async () => {
        let { data } = await GetOrderCat({deliveryType:0})
        uni.navigateTo({
            url: `/pageOrder/ConfirmOrder/ConfirmOrder?item=${JSON.stringify(data)}&shopShow=${true}` 
        })
    }
    const checkPick = async ()=>{
        PickShow.value = !PickShow.value
        PickList.value = PickList.value.map(item=>{
            item.isCheck = PickShow.value
            return item
        })
        let { data } = await UpdataCarList(PickList.value)
        await getCart()
    }
    const checkPost = async ()=>{
        postShow.value = !postShow.value
        postList.value = postList.value.map(item=>{
            item.isCheck = postShow.value
            return item
        })
        let { data } = await UpdataCarList(postList.value)
        await getCart()
        // await getCart(false)
    }
    return { total , intersection , deleteProduct , redact , getCart , checkPick , checkPost , PickShow , postShow , priceAll , show , PickList , postList , ImmediatePayment }
}
onLoad(async()=>{
    // await getCart()
})
onShow(async()=>{
    await getCart()
})
</script>

<style lang="scss" scoped>
</style>